<template>
  <u-modal :show="isShowModal" :closeOnClickOverlay="true" :showConfirmButton="false">
    <view slot="default">
      <view class="flex-col section_6">
        <view class="flex-row justify-center items-center self-stretch relative group">
          <text class="font_2">{{$t('drama.upgradeTitle')}}</text>
          <u-icon @click="handleCloseModal" name="close" color="#ffffff" class="close-icon"></u-icon>
        </view>
        <view class="flex-col self-stretch group_2">
          <text class="self-start font_3 text_2">{{$t('drama.selectTaskDays')}}:</text>
          <view class="mt-14 flex-col self-stretch">
            <view class="flex-row flex-wrapper gap-1">
              <view
                class="flex-col justify-start items-center text-wrapper_3 ml-23"
                :class="[{ 'select-text': item === cycleTime, 'cannot-select-text': Number(item) < Number(taskDay) }]"
                :key="item"
                @click="handleSelectCycle(item)"
                v-for="item in cycleTimes"
              >
                {{ item }}
              </view>
            </view>
          </view>
        </view>
        <!-- 升级选择 -->
        <view class="flex-row items-center self-stretch group_3 mt-20">
          <text class="font_3 text_5">{{$t('drama.cost')}}:</text>
          <view class="ml-30 flex-row shrink-0 align-center gap-1" v-for="item in ['Keep', 'Increase']" @click="handleSelectCost(item)">
            <image class="shrink-0 image_7" src="@/static/common/i-payment-select.png" v-if="costType === item" />
            <image class="shrink-0 image_7" src="@/static/common/i-payment-noselect.png" v-else />
            <text class="font_4 ml-9">{{ item }}</text>
          </view>
        </view>

        <!-- 支付方式 -->
        <view class="flex-row items-center self-stretch group_3 mt-20">
          <text class="font_3 text_5">{{$t('drama.payment')}}:</text>
          <view class="ml-30 flex-row shrink-0 align-center gap-1" v-for="item in ['USDT+SDT', 'MSDT']" @click="handleSelectPayment(item)">
            <image class="shrink-0 image_7" src="@/static/common/i-payment-select.png" v-if="paymentType === item" />
            <image class="shrink-0 image_7" src="@/static/common/i-payment-noselect.png" v-else />
            <text class="font_4 ml-9">{{ item }}</text>
          </view>
        </view>
        <!-- 支付方式USDT+SDT输入框 -->
        <view class="flex-col self-stretch group_4 mt-20" v-if="paymentType === 'USDT+SDT' && costType === 'Increase'">
          <view class="flex-col justify-start items-center text-wrapper_4">
            <u-input class="font_5 fill-input" :placeholder="$t('drama.fillU')" v-model="Uvalue" inputType="number"></u-input>
          </view>
          <view class="mt-12 flex-col justify-start items-center text-wrapper_4">
            <text class="font_6 text_6"></text>
            <u-input class="font_5" :placeholder="$t('drama.autoSDT')" readonly=""></u-input>
          </view>
        </view>
        <!-- 支付方式MSDT输入框 -->
        <view class="flex-col self-stretch group_4 mt-20" v-if="paymentType === 'MSDT' && costType === 'Increase'">
          <view class="flex-col justify-start items-center text-wrapper_4">
            <u-input class="font_5 fill-input" :placeholder="$t('drama.fillMSDT')" v-model="MSDTvalue"></u-input>
          </view>
          <view class="mt-12 flex-col justify-start items-center text-wrapper_4" style="visibility: hidden">
            <text class="font_6 text_6"></text>
            <u-input class="font_5" placeholder="Automatically display the required SDT" readonly=""></u-input>
          </view>
        </view>

        <view class="flex-col justify-start items-center self-center text-wrapper_5 mt-20" @click="upgradePay">
          <text class="font_2">{{$t('drama.upgradeNow')}}</text>
        </view>
      </view>
    </view>
  </u-modal>
</template>

<script>
import { participatingTaskAPI } from '@/service/index.js';
export default {
  props: {
    isShowModal: {
      type: Boolean,
      default: false
    },
    taskDay: {
      type: Number,
      default: 30
    }
  },
  data() {
    return {
      cycleTimes: ['30', '60', '90', '180', '360'],
      cycleTime: '30',
      paymentType: 'USDT+SDT',
      costType: 'Keep',
      Uvalue: '',
      rate: '',
      MSDTvalue: ''
    };
  },
  methods: {
    async upgradePay() {
      let param = {};
      param.badgePeriodId = this.cycleTimes.indexOf(this.cycleTime)+2;
      if(this.costType === 'Increase'){
        switch (this.paymentType) {
          case 'USDT+SDT':
            param.type = 1;
            param.coinU = this.Uvalue;
            break;
          case 'MSDT':
            param.type = 2;
            param.integral = this.MSDTvalue;
            break;
        }
      }
      const res = await participatingTaskAPI(param);
      if (res.data.code === 200) {
        uni.showToast({
          title: '参与成功'
        });
      }
    },
    handleCloseModal() {
      console.log('关闭');
      this.$emit('close');
    },
    handleSelectCycle(item) {
      this.cycleTime = item;
    },
    handleSelectPayment(item) {
      this.paymentType = item;
    },
    handleSelectCost(item) {
      this.costType = item;
    }
  }
};
</script>

<style scoped lang="scss">
.select-text {
  color: #00f6ff;
  background-color: #00f6ff33 !important;
  border-color: #00f6ff;
}
.cannot-select-text {
  background-color: #ffffff1a !important;
  color: #ffffff33;
  border: unset !important;
}

.close-icon {
  position: absolute;
  right: 1rem;
}
.text-wrapper_4 {
  margin-right: 0.5rem;
  padding: 0.25rem 0;
  background-color: #ffffff1a;
  border-radius: 0.5rem;
  color: #ffffff;
  .font_5 {
    font-size: 0.75rem;
    font-family: PingFang SC;
    line-height: 0.56rem;
    color: #ffffff80;
    border: unset;
    width: 100%;
  }
  .fill-input {
    width: unset;
    /deep/ .u-input__content__field-wrapper__field {
      color: #00f6ff !important;
    }
    /deep/ .uni-input-input {
      text-align: center;
    }
  }

  .font_6 {
    font-size: 0.75rem;
    font-family: PingFang SC;
    line-height: 0.75rem;
    color: #ffffff;
  }
  .text_6 {
    line-height: 0.69rem;
  }
}
/deep/ .u-popup__content {
  padding-top: unset;
  background-color: unset;
  color: #ffffff;
  .u-modal {
    // background-image: url('@/static/common/b-modal.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 22rem;
  }
  .u-line {
    display: none;
  }
}
.group_3 {
  // margin-top: 1.38rem;
  // padding: 0.75rem 0.13rem;

  .text_5 {
    line-height: 0.8rem;
  }
  .image_7 {
    width: 0.75rem;
    height: 0.75rem;
  }
  .font_4 {
    font-size: 0.88rem;
    font-family: PingFang SC;
    line-height: 0.65rem;
    color: #ffffff;
  }
}

/deep/ .u-modal__content {
  padding-top: unset !important;
}

.text-wrapper_5 {
  padding: 0.5rem 0;
  background-image: linear-gradient(307.5deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
  border-radius: 0.75rem;
  width: 13.94rem;
}

.section_6 {
  margin: 0 1rem;
  padding: 1.25rem 1rem 1.25rem 1.5rem;
  border-radius: 1.5rem;
  filter: drop-shadow(0rem 0.5rem 0.5rem #00000080);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 90vw;
  background-image: url('@/static/common/b-modal.png');
  .group {
    padding-top: 0.38rem;
    .image_6 {
      width: 1.25rem;
      height: 1.25rem;
    }
    .pos_3 {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .group_2 {
    margin-top: 1.88rem;
    .text_2 {
      line-height: 0.81rem;
    }
    .text-wrapper {
      padding: 0.5rem 0;
      background-color: #ffffff1a;
      border-radius: 0.25rem;
      width: 4.5rem;
      height: 1.5rem;
      .text_3 {
        color: #ffffff33;
      }
    }

    .text-wrapper_2 {
      padding: 0.5rem 0;
      background-color: #00f6ff33;
      border-radius: 0.25rem;
      width: 4.56rem;
      height: 1.56rem;
      border-left: solid 0.031rem #00f6ff;
      border-right: solid 0.031rem #00f6ff;
      border-top: solid 0.031rem #00f6ff;
      border-bottom: solid 0.031rem #00f6ff;
    }
    .font {
      font-size: 0.75rem;
      font-family: PingFang SC;
      line-height: 0.56rem;
      color: #ffffff;
    }

    .text-wrapper_3 {
      background-color: #ffffff33;
      border-radius: 0.25rem;
      width: 4.56rem;
      height: 1.56rem;
      border-left: solid 0.031rem #ffffff4d;
      border-right: solid 0.031rem #ffffff4d;
      border-top: solid 0.031rem #ffffff4d;
      border-bottom: solid 0.031rem #ffffff4d;
    }
  }
}
</style>
